<template>
    <div>
        <navigation_list :path="path" @path-to="pathTo" @mkdir="mkdir" @newOne="newOne"></navigation_list>
        <list :items="items" @view="view" @select="select" :selectItems="selectItems"></list>
        <pagination :page="page" @load-items="loadItems"></pagination>
        <operation
            :show="selectItems.length > 0"
            @delete-items="deleteItems"
            @export-items="exportItems"
            @import-items="importItems"
            @close="selectItems = []">
        </operation>
    </div>
</template>

<script>
export default {
    data() {
            return {
                selected: false,
                selectItem: [],
            }
        },
    components: {
        'pagination': component('/static/pagination.vue'),
        'list': component('/static/list.vue'),
        'operation': component('/static/operation.vue'),
        'navigation_list': component('/static/navigation_list.vue'),
    },
    data() {
        return {
            page: {'total': 36, 'pages': 3, 'index': 1, 'size': 12},
            path: '/abc/cde/fgh',
            items: [
                {
                    id: 1,
                    path: '/',
                    name: 'test',
                    content_type: '-',
                    author: 'guest',
                    updated_at: '2021-12-25 23:24:00'
                },
                {
                    id: 2,
                    path: '/',
                    name: 'test1',
                    content_type: '-',
                    author: 'guest',
                    updated_at: '2021-12-25 23:24:00'
                },
                {
                    id: 3,
                    path: '/',
                    name: 'test3',
                    content_type: 'd',
                    author: 'guest',
                    updated_at: '2021-12-25 23:24:00'
                },
            ],
            selectItems: [],
        }
    },
    mounted() {
        this.path = '/'
        this.loadItems(1)
    },
    methods: {
        pathTo(path) {
            console.log('pathTo', path)
            this.path = path
            this.loadItems(1)
        },
        mkdir(path) {
            console.log('mkdir', path)
            if (!path || path.length <= 0 || path === '/') return
            axios.post('/blog/mkdir', {
                    path: path
                })
                .then(
                    response => {
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                this.pathTo(path)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                layer.msg(data['msg'])
                            }
                        }
                    })
                .catch(function (error) {
                    console.log(error);
                });
            this.path = path
        },
        newOne(path) {
            console.log('newOne', path)
        },
        loadItems(index) {
            console.log('loadItems', index)
            axios.get('/blog/page', {
                    params: {
                        index: index,
                        pagesize: this.page.size,
                        path: this.path,
                    }
                })
                .then(
                    response => {
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                this.items = data['msg']['items'] ? data['msg']['items'] : this.items
                                this.page = data['msg']['page'] ? data['msg']['page'] : this.page
                                this.path = data['msg']['path']
                                this.selectItems = []
                            } else {
                                console.log('FAILED: ' + data['msg'])
                            }
                        }
                    })
                .catch(function (error) {
                    console.log(error);
                });
        },
        view(item) {
            if (item.content_type === 'd') {
                this.pathTo((item.path.endsWith('/') ? item.path : (item.path + '/')) + item.name)
            } else {
                console.log('view', item)
            }
        },
        select(selectItems) {
            // console.log('select', selectItems, selectItems.length)
            this.selectItems = selectItems
        },
        deleteItems() {
            console.log('deleteItems', this.selectItems)
        },
        importItems() {
            console.log('importItems', this.selectItems)
        },
        exportItems() {
            console.log('exportItems', this.selectItems)
        },
    }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
